import React from 'react';
import { Typography, Container, Box, Paper, Grid, Card, CardContent, Chip, Button, Fade, Grow } from '@mui/material';
import { styled, keyframes } from '@mui/material/styles';
import { useNavigate } from 'react-router-dom';
import { 
  Psychology, 
  Analytics, 
  Speed, 
  Security, 
  TrendingUp, 
  MedicalServices,
  AutoAwesome,
  Insights,
  ArrowForward
} from '@mui/icons-material';

// 动画关键帧
const fadeInUp = keyframes`
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`;

const float = keyframes`
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
`;

const pulse = keyframes`
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
  }
`;

const shimmer = keyframes`
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
`;

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const glow = keyframes`
  0%, 100% {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(102, 126, 234, 0.6);
  }
`;

const slideInLeft = keyframes`
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
`;

const slideInRight = keyframes`
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
`;

// 主容器样式
const HeroContainer = styled(Box)(({ theme }) => ({
  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)',
  minHeight: '100vh',
  display: 'flex',
  alignItems: 'center',
  position: 'relative',
  overflow: 'hidden',
  '&::before': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    background: `
      radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%),
      url("data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Ccircle cx="30" cy="30" r="2"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
    `,
    animation: `${shimmer} 3s ease-in-out infinite`,
  },
  '&::after': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    background: 'linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%)',
    animation: `${shimmer} 4s ease-in-out infinite reverse`,
  },
}));

// 英雄区域内容
const HeroContent = styled(Container)(({ theme }) => ({
  position: 'relative',
  zIndex: 1,
  textAlign: 'center',
  color: 'white',
}));

// 特性卡片样式
const FeatureCard = styled(Card)(({ theme }) => ({
  height: '100%',
  background: 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)',
  borderRadius: '24px',
  padding: theme.spacing(3),
  border: '1px solid rgba(255,255,255,0.3)',
  boxShadow: '0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.05)',
  transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
  cursor: 'pointer',
  position: 'relative',
  overflow: 'hidden',
  backdropFilter: 'blur(10px)',
  '&::before': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: '4px',
    background: 'linear-gradient(90deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4)',
    borderRadius: '24px 24px 0 0',
  },
  '&::after': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: '-100%',
    width: '100%',
    height: '100%',
    background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent)',
    transition: 'left 0.6s',
  },
  '&:hover': {
    transform: 'translateY(-12px) scale(1.03) rotateX(5deg)',
    boxShadow: '0 25px 50px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.1)',
    animation: `${glow} 2s ease-in-out infinite`,
    '&::after': {
      left: '100%',
    },
  },
}));

// 统计数据卡片
const StatsCard = styled(Box)(({ theme }) => ({
  background: 'rgba(255, 255, 255, 0.15)',
  backdropFilter: 'blur(15px)',
  borderRadius: '20px',
  padding: theme.spacing(3),
  textAlign: 'center',
  border: '1px solid rgba(255, 255, 255, 0.3)',
  transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
  position: 'relative',
  overflow: 'hidden',
  '&::before': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    background: 'linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%)',
    opacity: 0,
    transition: 'opacity 0.3s ease',
  },
  '&:hover': {
    transform: 'translateY(-8px) scale(1.05)',
    background: 'rgba(255, 255, 255, 0.25)',
    boxShadow: '0 20px 40px rgba(0,0,0,0.2)',
    '&::before': {
      opacity: 1,
    },
  },
}));

// 现代化按钮
const ModernButton = styled(Button)(({ theme }) => ({
  borderRadius: '16px',
  padding: theme.spacing(2, 5),
  fontWeight: 700,
  textTransform: 'none',
  fontSize: '1.2rem',
  boxShadow: '0 8px 32px rgba(0,0,0,0.2)',
  transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
  position: 'relative',
  overflow: 'hidden',
  '&::before': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: '-100%',
    width: '100%',
    height: '100%',
    background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)',
    transition: 'left 0.5s',
  },
  '&:hover': {
    transform: 'translateY(-4px) scale(1.05)',
    boxShadow: '0 12px 48px rgba(0,0,0,0.4)',
    animation: `${glow} 1.5s ease-in-out infinite`,
    '&::before': {
      left: '100%',
    },
  },
  '&:active': {
    transform: 'translateY(-2px) scale(1.02)',
  },
}));

const HomePage: React.FC = () => {
  const navigate = useNavigate();
  
  return (
    <Box>
      {/* 英雄区域 */}
      <HeroContainer>
        <HeroContent maxWidth="lg">
          <Fade in timeout={800}>
            <Box>
              <Typography 
                variant="h1" 
                component="h1" 
                gutterBottom
                sx={{ 
                  fontWeight: 800,
                  mb: 3,
                  color: '#2d3748',
                  animation: `${fadeInUp} 1s ease-out`,
                }}
              >
                🧠 BrainAI
              </Typography>
              <Typography 
                variant="h4" 
                component="h2" 
                gutterBottom
                sx={{ 
                  fontWeight: 600,
                  mb: 4,
                  opacity: 0.9,
                  animation: `${fadeInUp} 1s ease-out 0.2s both`
                }}
              >
                下一代AI脑肿瘤智能诊断系统
              </Typography>
              <Typography 
                variant="h6" 
                sx={{ 
                  mb: 5,
                  opacity: 0.8,
                  maxWidth: '600px',
                  mx: 'auto',
                  lineHeight: 1.6,
                  animation: `${fadeInUp} 1s ease-out 0.4s both`
                }}
              >
                基于深度学习的医学影像分析平台，为医生提供精准、快速的脑肿瘤诊断辅助，
                让AI技术真正服务于医疗健康事业
              </Typography>
              
              {/* 统计数据 */}
              <Grid container spacing={3} sx={{ mb: 5 }}>
                {[
                  { label: '诊断准确率', value: '97.33%', icon: <TrendingUp /> },
                  { label: '数据集规模', value: '7,023', icon: <Analytics /> },
                  { label: '识别类别', value: '4种', icon: <Psychology /> },
                  { label: '响应时间', value: '<2秒', icon: <Speed /> },
                ].map((stat, index) => (
                  <Grid size={{ xs: 6, md: 3 }} key={index}>
                    <Grow in timeout={1000 + index * 200}>
                      <StatsCard>
                        <Box sx={{ mb: 1 }}>
                          {React.cloneElement(stat.icon, { 
                            sx: { fontSize: 40, color: 'rgba(255,255,255,0.8)' } 
                          })}
                        </Box>
                        <Typography variant="h4" sx={{ fontWeight: 800, mb: 0.5 }}>
                          {stat.value}
                        </Typography>
                        <Typography variant="body2" sx={{ opacity: 0.8 }}>
                          {stat.label}
                        </Typography>
                      </StatsCard>
                    </Grow>
                  </Grid>
                ))}
              </Grid>

              {/* CTA按钮 */}
              <Box sx={{ display: 'flex', gap: 3, justifyContent: 'center', flexWrap: 'wrap' }}>
                <Fade in timeout={1600}>
                  <ModernButton
                    variant="contained"
                    size="large"
                    endIcon={<ArrowForward />}
                    onClick={() => navigate('/prediction')}
                    sx={{
                      background: 'rgba(255, 255, 255, 0.2)',
                      backdropFilter: 'blur(10px)',
                      border: '1px solid rgba(255, 255, 255, 0.3)',
                      color: 'white',
                      '&:hover': {
                        background: 'rgba(255, 255, 255, 0.3)',
                      }
                    }}
                  >
                    🚀 立即体验AI诊断
                  </ModernButton>
                </Fade>
                <Fade in timeout={1800}>
                  <ModernButton
                    variant="outlined"
                    size="large"
                    endIcon={<Insights />}
                    onClick={() => navigate('/data-analysis')}
                    sx={{
                      borderColor: 'rgba(255, 255, 255, 0.5)',
                      color: 'white',
                      '&:hover': {
                        borderColor: 'white',
                        background: 'rgba(255, 255, 255, 0.1)',
                      }
                    }}
                  >
                    📊 查看数据分析
                  </ModernButton>
                </Fade>
              </Box>
            </Box>
          </Fade>
        </HeroContent>
      </HeroContainer>

      {/* 特性介绍区域 */}
      <Container maxWidth="lg" sx={{ py: 8 }}>
        <Fade in timeout={2000}>
          <Typography 
            variant="h3" 
            component="h2" 
            align="center" 
            gutterBottom
            sx={{ 
              fontWeight: 700,
              color: '#2d3748',
              mb: 2
            }}
          >
            🎯 核心优势
          </Typography>
        </Fade>
        <Fade in timeout={2200}>
          <Typography 
            variant="h6" 
            align="center" 
            sx={{ 
              color: '#4a5568',
              mb: 6,
              maxWidth: '600px',
              mx: 'auto'
            }}
          >
            结合最新的深度学习技术与医学专业知识，为您提供可靠的诊断支持
          </Typography>
        </Fade>

        <Grid container spacing={4}>
          {[
            {
              icon: <AutoAwesome sx={{ fontSize: 50, color: '#667eea' }} />,
              title: '🤖 AI智能识别',
              description: '基于卷积神经网络的深度学习模型，能够自动识别和分类四种脑部状况',
              features: ['深度学习算法', 'CNN架构', '自动特征提取']
            },
            {
              icon: <Speed sx={{ fontSize: 50, color: '#4ECDC4' }} />,
              title: '⚡ 极速诊断',
              description: '毫秒级响应时间，为医生提供实时的诊断辅助，大幅提升工作效率',
              features: ['实时处理', '云端部署', '高并发支持']
            },
            {
              icon: <Security sx={{ fontSize: 50, color: '#FF6B6B' }} />,
              title: '🛡️ 高精度保障',
              description: '97.33%的验证准确率，经过大量医学数据训练和验证，确保诊断可靠性',
              features: ['高准确率', '数据验证', '持续优化']
            },
            {
              icon: <MedicalServices sx={{ fontSize: 50, color: '#96CEB4' }} />,
              title: '🏥 医疗级标准',
              description: '符合医疗行业标准，可作为医生的专业辅助工具，提升诊断质量',
              features: ['医疗标准', '专业辅助', '质量保证']
            }
          ].map((feature, index) => (
            <Grid size={{ xs: 12, md: 6 }} key={index}>
              <Grow in timeout={2400 + index * 200}>
                <FeatureCard>
                  <CardContent sx={{ p: 0 }}>
                    <Box sx={{ textAlign: 'center', mb: 3 }}>
                      <Box sx={{ 
                        animation: `${float} 3s ease-in-out infinite`,
                        '&:hover': {
                          animation: `${rotate} 2s linear infinite`,
                        }
                      }}>
                        {feature.icon}
                      </Box>
                    </Box>
                    <Typography 
                      variant="h5" 
                      component="h3" 
                      gutterBottom
                      sx={{ 
                        fontWeight: 700,
                        color: '#2d3748',
                        textAlign: 'center',
                        mb: 2
                      }}
                    >
                      {feature.title}
                    </Typography>
                    <Typography 
                      variant="body1" 
                      sx={{ 
                        color: '#4a5568',
                        lineHeight: 1.6,
                        mb: 3,
                        textAlign: 'center'
                      }}
                    >
                      {feature.description}
                    </Typography>
                    <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', justifyContent: 'center' }}>
                      {feature.features.map((feat, idx) => (
                        <Chip 
                          key={idx}
                          label={feat}
                          size="small"
                          sx={{ 
                            backgroundColor: 'rgba(102, 126, 234, 0.1)',
                            color: '#667eea',
                            fontWeight: 600
                          }}
                        />
                      ))}
                    </Box>
                  </CardContent>
                </FeatureCard>
              </Grow>
            </Grid>
          ))}
        </Grid>

        {/* 技术栈展示 */}
        <Fade in timeout={3000}>
          <Box sx={{ mt: 8, textAlign: 'center' }}>
            <Typography 
              variant="h4" 
              component="h2" 
              gutterBottom
              sx={{ 
                fontWeight: 700,
                color: '#2d3748',
                mb: 4
              }}
            >
              🔧 技术架构
            </Typography>
            <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', justifyContent: 'center' }}>
              {[
                'PyTorch', 'CNN', 'React', 'TypeScript', 'Material-UI', 
                'Python', 'Flask', 'TensorBoard'
              ].map((tech, index) => (
                <Chip 
                  key={index}
                  label={tech}
                  sx={{ 
                    background: 'linear-gradient(135deg, #667eea 0%,rgb(75, 153, 162) 100%)',
                    color: 'white',
                    fontWeight: 700,
                    fontSize: '1rem',
                    height: '45px',
                    borderRadius: '25px',
                    animation: `${pulse} 2s ease-in-out infinite ${index * 0.2}s`,
                    transition: 'all 0.3s ease',
                    '&:hover': {
                      transform: 'translateY(-4px) scale(1.1)',
                      boxShadow: '0 8px 25px rgba(102, 126, 234, 0.4)',
                      animation: `${glow} 1s ease-in-out infinite`,
                    }
                  }}
                />
              ))}
            </Box>
          </Box>
        </Fade>
      </Container>
    </Box>
  );
};

export default HomePage;